<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/home.css">
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../echarts.js"></script>
</head>
<body style="background-color: #f9f7f0">
<div class="container-fluid">

<div class="row">
       <div style="margin-top: 25px"></div>
    <div class="col-md-4 " style="border-radius: 25px;width:31.33%;margin-left:2%;background: #fbf6d8;height: 300px;;overflow: hidden">
        <div class="md6div">
                             <h1 style=" margin-left:150px;">公告</h1>
                             <hr>
                                <div class="oldiv">
                                    <!-- Button trigger modal -->
                                    <button  style=" width: 100%;border: 1px solid #fbf6d8  ;color: #e5c7ab;background: #fbf6d8;" type="button" class="btn btn-primary btn-lg btn1" data-toggle="modal" data-target="#myModal">

                                    </button>
                                    <button  style="width: 100%; border: 1px solid  #fbf6d8;color: #e5c7ab;background: #fbf6d8;" type="button" class="btn btn-primary btn-lg btn1" data-toggle="modal" data-target="#myModal">

                                    </button>
                                    <button  style=" width: 100%;border: 1px solid  #fbf6d8;color: #e5c7ab;background: #fbf6d8;" type="button" class="btn btn-primary btn-lg btn1" data-toggle="modal" data-target="#myModal">

                                    </button>
                                    <button  style=" width: 100%;border: 1px solid  #fbf6d8;color: #e5c7ab;background: #fbf6d8;" type="button" class="btn btn-primary btn-lg btn1" data-toggle="modal" data-target="#myModal">
                                    </button>


                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                        <div class="modal-dialog" role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                                    <h4 class="modal-title otitle" id="myModalLabel" style="text-align: center">标题</h4>

                                                </div>
                                                <div class="modal-body" style="height: 200px">
                                                    <p style="text-align: center" class="ocontent">内容</p>

                                                    <p style="margin-left: 500px;margin-top: 150px" class="time">发布者: 启明星后勤部 发布时间: 2019-11-11 </p>

                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                         </div>
    </div>
    <div> </div>

    <div class="col-md-4" style="border-radius: 25px;width: 31.33%;margin-left:2%;background: #fbf6d8;;height: 300px">
        <div id="main" style="height:300px"></div>
    </div>

    <div class="col-md-4" style="border-radius: 25px;width: 31.33%;margin-left:2%;background: #fbf6d8;height: 300px;">
        <div id="main1" style="border-radius: 25px;;height:300px;text-align: center">
            <iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=55" style="" width="255" height="294" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
        </div>
    </div>

</div>
<div class="row">
      <div style="margin-top: 25px"></div>
    <div class="col-md-6" style=" color: #e5b272;  margin-left:2%;width:48%;border-radius: 25px;;background: #fbf6d8;height: 300px ">
        <h1 class="mdh" style=" text-align: center;height: 70px">启明星今日供应菜品</h1>
        <p class="md6p">早餐：包子，稀饭，豆浆，油条，鸡蛋，面包，牛奶，馒头 </p>
        <p class="md6p">午餐：肉馅蒸蛋，鱼香鸡丁，丸子汤，酸辣洋白菜，麻婆豆腐 </p>
        <p class="md6p">晚餐：炒肝尖，豆角焖饭，黑白菜，木须肉，鱼头豆腐汤 </p>

    </div>
    <div class="col-md-6" style="  margin-left:2%;width:48%;border-radius: 25px;background: #fbf6d8;height:300px;">
        <div  id="carousel-example-generic" class="carousel slide" data-ride="carousel">

        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>
        <div class="carousel-inner" role="listbox">
            <div class="item active">
            <img  style="border-radius: 25px;;width: 580px;height:250px" src="../images/children4.jpg" alt="...">
        <div class="carousel-caption">

        </div>
        </div>
        <div class="item">
        <img style=" border-radius: 25px;width: 580px;height:250px" src="../images/children5.jpg" alt="...">
        <div class="carousel-caption">

        </div>
        </div>
        <div class="item">
        <img style=" border-radius: 25px;width: 580px;height:250px"  src="../images/children6.jpg" alt="...">
        <div class="carousel-caption">
        </div>
        </div>
        </div>


        <a   style="border-radius: 25px;"class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
        </a>
        <a   style="border-radius: 25px;"class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only"></span>
        </a>
        </div>
        <p class="mdp"><a id="aaa" href="Photo.html">查看更多宝宝照片</a></p>
    </div>
</div>
</div>
<script type="text/javascript">

    var myChart = echarts.init(document.getElementById('main'));

    var option = {
        title : {
            text: '启明星出勤状况',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',

        },
        series : [
            {
                name: '',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:300, name:'在校'},
                    {value:18, name:'请假'},
                    {value:11, name:'未出勤'},

                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
</script>
<script>
    let data = JSON.parse(localStorage.getItem('noticeData'));


    let notice_node = $(".oldiv").children();
    console.log(notice_node);
    let len = data.length;
    if(len>4){
        len = 4;
    }
    for(let i=0;i<len;i++){
        (function (i) {
    notice_node.eq(i).text(data[i].title);

    notice_node.eq(i);
    console.log(notice_node.eq(i));
    $('.otitle').text(data[i].title);

    })(i);
    }
    $('.btn1').on('click',function () {
        var getTitle=$(this).text();
        $.each(data, function (index, value) {
            if (getTitle == value.title) {
                $('.otitle').text(value.title);
                $('.ocontent').text(value.content);
                $('.time').text(value.time);
            }
        });
    })

    // console.log(data);
    // $('.btn1').click(function () {
    //     var title=$(this).text();
    //     $('.otitle').text(title);
    //
    //     each('data',function (index,value) {
    //         if (title==value.title){
    //             $('.ocontent').text(value.title);
    //         }
    //     })
    //
    // });
    // $('.btn2').click(function () {
    //     var title=$(this).text();
    //     var odata=data.content;
    //     for (let i=0;i<data.length;i++){
    //         $('.ocontent').text(data[i].content);
    //     }
    //     $('.otitle').text(title);
    //
    // });
    // $('.btn3').click(function () {
    //     var title=$(this).text();
    //     $('.otitle').text(title);
    // });
    // $('.btn4').click(function () {
    //     var title=$(this).text();
    //     $('.otitle').text(title);
    // });
// alert($('.otitle').text())

</script>
</body>
</html>